<template>
	<view class="boardgame-container">
		<!-- 桌游基本信息 -->
		<view class="info-wrapper">
			<!-- 桌游图 -->
			<view class="image">
				<image :src="game.picture" mode="widthFix" />
			</view>
			<view class="name">{{ game.name }}</view>
			<view class="bg-info">
				<u-icon name="clock" color="#999" size="16"></u-icon>
				<view class="text">{{ game.time }}</view>
				<u-icon name="account" color="#999" size="16"></u-icon>
				<view class="text">{{ game.players }}</view>
				<u-icon name="info-circle" color="#999" size="16"></u-icon>
				<view class="text">{{ game.difficulty }}</view>
			</view>
		</view>

		<!-- 分栏 -->
		<u-tabs
			:list="tabList"
			@click="handleTabClick"
			:scrollable="false"
			:line-color="themeColor"
			:activeStyle="{ color: '#000', transform: 'scale(1.1)', transition: 'all 0.2s' }"
		></u-tabs>

		<!-- 游戏介绍 -->
		<view v-if="currentTab == 0" class="intro-wrapper">
			<!-- 游戏简介 -->
			<view class="game-intro">
				<view class="title">游戏简介</view>
				<view class="content"> {{ game.brief }} </view>
			</view>

			<!-- 游戏规则 -->
			<view class="game-rules">
				<view class="title">游戏规则</view>
				<view class="rule-item">
					<view class="rule-title">游戏配置</view>
					<view v-html="markText(game.gameConfiguration)" class="rule-content"></view>
				</view>

				<view class="rule-item">
					<view class="rule-title">游戏流程</view>
					<view v-html="markText(game.gameFlow)" class="rule-content"></view>
				</view>

				<view class="rule-item">
					<view class="rule-title">游戏结束</view>
					<view v-html="markText(game.gameOver)" class="rule-content"></view>
				</view>
			</view>

			<!-- 教学视频 -->
		</view>

		<!-- 评论区 -->
		<CommentArea
			class="comment-area"
			v-show="currentTab == 1"
			:post="game"
			:commentList="commentList"
			:userData="userData"
			@submitComment="handleSubmitComment"
			@like="handleLike"
			@collect="handleCollect"
			@delete="handleDelete"
		/>

		<!-- AI问答 -->
		<AIChat v-show="currentTab == 2" class="ai-qa" :game="game" :userData="userData" />

		<!-- 附近活动 -->
		<view class="nearby-activities" v-show="currentTab == 3">
			<view class="activity-wrapper">
				<view v-if="activityList.length == 0" class="no-activity">
					<u-empty mode="data" text="暂无活动！"> </u-empty>
				</view>
				<view v-else class="activity-list">
					<view v-for="item in activityList" :key="item.id" class="activity-item" @click="toActivityDetail(item)">
						<view class="activity-title">
							<view class="title">{{ item.title }}</view>
							<view class="tag">{{ item.tag }}</view>
						</view>
						<view class="activity-info">
							<view class="activity-info-item">
								<u-icon name="clock" color="#4B5563" size="16"></u-icon>
								{{ item.date }} <view class="highline">{{ item.time }}</view>
							</view>
							<view class="activity-info-item">
								<u-icon name="map" color="#4B5563" size="16"></u-icon>
								{{ item.locationName }}
							</view>
							<view class="activity-info-item">
								<view class="players">
									<image v-for="player in item.participantVoList" :key="player.id" :src="player.user.avatarUrl" />
									<image :src="item.userVo.avatarUrl" />
								</view>
								<u-icon name="account" color="#4B5563" size="16" style="margin-right: 0px"></u-icon>
								<view>{{ item.participantVoList ? item.participantVoList.length + 1 : 1 }}/{{ item.peopNum }}人</view>
								<u-button>加入</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/api/http.js';
import { marked } from 'marked';
import { peizhi, liucheng, jieshu } from './wenzi.js';
import CommentArea from '@/components/CommentArea/CommentArea.vue';
import AIChat from '@/components/AIChat/AIChat.vue';

export default {
	components: {
		CommentArea,
		AIChat
	},
	data() {
		return {
			id: 1,
			// tab栏
			tabList: [
				{
					name: '游戏介绍'
				},
				{
					name: '游戏评价'
				},
				{
					name: 'AI问答'
				},
				{
					name: '相关活动'
				}
			],
			currentTab: 0, // 当前选中的tab索引
			marked: require('marked'),
			game: {
				gameConfiguration: '',
				gameFlow: '',
				gameOver: ''
			}, // 游戏详情
			userData: {},
			commentList: [], // 评论列表
			activityList: [] // 活动列表
		};
	},
	computed: {
		peizhi() {
			return peizhi;
		},
		liucheng() {
			return liucheng;
		},
		jieshu() {
			return jieshu;
		}
	},
	onLoad(option) {
		let id = option.id; // 获取传递过来的id
		this.id = id;
	},
	mounted() {
		this.handleInit();
	},
	methods: {
		handleInit() {
			this.getGameDetail(); // 调用获取游戏详情的方法
			this.getUserData();
			this.getComment();
			this.getActivityList();
		},
		markText(text) {
			return this.marked(text);
		},
		handleTabClick(e) {
			const index = e.index;
			this.currentTab = index;
		},
		async getGameDetail() {
			let difficultyMap = {
				EASY: '简单',
				MEDIUM: '中等',
				HARD: '困难'
			};
			const res = await request(`/game/${this.id}`);
			let game = res.data;
			game.difficulty = difficultyMap[game.difficulty];
			game.likes = 0;
			game.collect = 0;
			this.game = game;
		},
		// 异步获取用户数据
		async getUserData() {
			// 发送请求，获取用户数据
			const res = await request(`/user/getUserData`);
			// 将获取到的数据赋值给userData
			this.userData = res.data;
		},
		async getComment() {
			// 获取评论
			let res = await request(`/comments/get?type=${1}&postId=${this.id}`);
			this.commentList = [...res.data];
		},
		async getActivityList() {
			const res = await request(`/activities/activityWithGame?gameId=${this.id}`);
			this.activityList = res.data
				.filter((item) => new Date(item.endTime) > new Date())
				.sort((prev, next) => {
					return new Date(prev.startTime) - new Date(next.startTime);
				})
				.map((item) => {
					return {
						...item,
						date: this.timeCalc(item.startTime),
						time: item.startTime.split(' ')[1] + '-' + item.endTime.split(' ')[1],
						tag: item.gameInfo[0].name
					};
				});
		},
		toActivityDetail(item) {
			uni.navigateTo({
				url: `/pages/Activity/ActivityDetail/ActivityDetail?id=${item.id}`
			});
		},
		// ------------ 评论区组件方法 ----------------
		async handleSubmitComment(comment) {
			let commentData = {
				...comment,
				type: 1 // 0: 帖子评论 1: 桌游评论 2:活动评论
			};
			await request('/comments/save', commentData, 'POST');
			this.handleInit();
		},
		async handleLike() {
			await request(
				`/forum/like`,
				{
					postsId: this.id,
					type: 1,
					operation: this.post.liked ? 0 : 1 // 0 取消点赞 1 点赞
				},
				'POST'
			);
			this.handleInit();
		},
		async handleCollect() {
			await request(
				`/forum/collect`,
				{
					postsId: this.id,
					operation: this.post.collected ? 0 : 1 // 0 取消点赞 1 点赞
				},
				'POST'
			);
			this.handleInit();
		},
		async handleDelete() {
			this.handleInit();
		},
		timeCalc(time) {
			// 今天、明天、后天、月份-日期
			const today = new Date();
			const targetDate = new Date(time);
			const diff = targetDate - today;
			const diffDays = Math.round(diff / (1000 * 60 * 60 * 24));
			if (diffDays == 0) {
				return `今天`;
			} else if (diffDays == 1) {
				return '明天';
			} else if (diffDays == 2) {
				return '后天';
			} else {
				return `${targetDate.getMonth() + 1 < 10 ? '0' + (targetDate.getMonth() + 1) : targetDate.getMonth() + 1}-${targetDate.getDate()}`;
			}
		}
	}
};
</script>

<style lang="scss">
.boardgame-container {
	padding: 20rpx;
	// 基本信息
	.info-wrapper {
		padding: 20rpx;
		padding-bottom: 10rpx;
		width: calc(100% - 40rpx);
		display: flex;
		flex-direction: column;

		.image {
			width: 100%;
			min-height: 350rpx;
			height: 350rpx;
			max-height: 350rpx;
			border-radius: 25rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			font-size: 40rpx;
			font-weight: bold;
			margin-top: 30rpx;
			margin-bottom: 10rpx;
		}

		.bg-info {
			display: flex;
			align-items: center;
			font-size: $font-size-base;
			color: #999;
			gap: 10rpx;

			.text {
				margin-right: 40rpx;
			}
		}
	}

	.intro-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 40rpx;
		padding: 20rpx;
		color: #333;

		.game-intro {
			width: 100%;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.content {
				font-size: $font-size-base;
				color: #666;
				line-height: 1.5;
				text-align: justify;
			}
		}

		.game-rules {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.title {
				color: #333;
				font-weight: bold;
			}

			.rule-item {
				width: calc(100% - 40rpx);
				margin-bottom: 20rpx;
				background-color: #eee;
				padding: 20rpx;
				border-radius: 10rpx;

				.rule-title {
					font-size: $font-size-base;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.rule-content {
					font-size: $font-size-base;
					color: #666;
					line-height: 1.5;
				}
			}
		}
	}

	// 评论
	.ai-qa {
	}
}

.activity-wrapper {
	flex: 1;
	overflow-y: scroll;
	.activity-list {
		margin: 40rpx 0;
		padding: 0 20rpx;

		.activity-item {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 25rpx;
			padding: 40rpx;
			box-shadow: 0 3px 9px #eee;
			border: 1px solid #eee;
			color: #4b5563;

			.activity-title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				.tag {
					padding: 4rpx 8rpx;
					background-color: $theme-color-bg;
					color: $theme-color;
					font-size: 24rpx;
					border-radius: 25rpx;
					padding: 10rpx 20rpx;
				}
			}

			.activity-info {
				display: flex;
				flex-direction: column;
				font-size: $font-size-base;
				gap: 10px;

				.activity-info-item {
					display: flex;
					align-items: center;
					gap: 10px;

					.players {
						display: flex;
						align-items: center;
						margin-right: 40rpx;
						width: 100rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							border-radius: 100%;
							margin-right: -30rpx;
							border: 2px solid #fff;
						}
					}

					.highline {
						color: $theme-color-light;
					}

					.u-button {
						width: 100rpx;
						height: 60rpx;
						font-size: $font-size-small;
						margin-left: auto;
						margin-right: 0;
						background-color: $theme-color;
						color: #fff;
						border-radius: 8px;
					}
				}
			}
		}
	}
}
.no-activity {
	margin-top: 10rpx;
}
</style>
